<%@include file="/WEB-INF/jsp/include/importAndtag.inc"%>
<%@ page contentType="text/html; charset=UTF-8" %>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Cache-Control" content="no-cache" />
	
	<title><s:text name="ApplicationAndModules"/></title>
	<%@include file="/WEB-INF/jsp/include/pageHeader.inc"%>
	
	<script type="text/javascript">
	$(function() {
		
	    $( "#modules-tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
	    $( "#modules-tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left ui-corner-right");
	    
	    $(".combo-content-list-item").toggle(
	    	function(){
	    		$(this).addClass("selected");
	    	},
	    	function(){
	    		$(this).removeClass("selected");
	   	 	}
	    );
	});
	
	function buySubmit(){
		var selectedModulesIds=[];
		$(".selected input[name='modulesId']").each(function(i,val){
			selectedModulesIds[i] = val.value;
		});
		window.location.href = "${pageContext.request.contextPath}/subscription/subscripInfo.action?modules="+selectedModulesIds;
	}
	</script>
	
	<link href="${pageContext.request.contextPath}/css/jquery-tab.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
		.combo-content-list{
			margin-top: 5px;
			line-height: 14px;
			padding-left: 4px;
		}
		.combo-content-list, .combo-content-list li.selected {
			background:#f6f6f6;
			border: 2px solid #0d7da8;
		}
		.combo-content-list li.selected .combo-type{
			color: #0D7DA8;
		}
		.combo-content-list li:hover{
			border: 2px solid #AFE1F5;
			-moz-transition: border .3s ease-in .2s;
			-webkit-transition: border .3s ease-in .2s;
			-o-transition: border .3s ease-in .2s;
			-ms-transition: border .3s ease-in .2s;
			transition: border .3s ease-in .2s;
		}
		.combo-content-list .combo-content-list-item {
			float: left;
			margin-top: 15px;
			display: block;
			width: 215px;
			margin: 20px 10px;
			border: 1px solid #bebebe;
			background: #f6f6f6;
			height:250px;
			padding:10px;
			position: relative;
			border: 2px solid transparent;
			cursor: pointer;
			-webkit-box-shadow: 1px 1px 4px 1px #BDDBE0;
			-moz-box-shadow: 1px 1px 4px 1px #BDDBE0;
			box-shadow: 1px 1px 4px 1px #BDDBE0;
		}
		.combo-content-list-item .combo-volume {
			border-bottom: 1px dashed #d5d5d5;
			text-align: center;
			font-size: 12px;
			font-weight: bold;
			position: static;
		}
		.combo-content-list-item .combo-volume .combo-many {
			padding: 37px 0 12px 0;
			display: inline-block;
			width: 100%;
		}
		.combo-type {
			font-size: 24px;
			font-weight: bold;
			padding-top: 12px;
			padding-bottom: 12px;
			text-align: center;
			border-bottom: 1px dashed #d5d5d5;
			color: #333;
		}
		.combo-pay-choice {
			padding-top: 19px;
			padding-bottom: 0;
		}
		.combo-content-list .combo-content-list-item .know-more{
			position:absolute;
			bottom:8px;
			right:10px;
		}
		.combo-content-list .combo-content-list-item:hover {
			background:#f6f6f6;
		}
	</style>
  
</head>

<body style="background:#F5F5F5;">
<%@include file="../include/bodyHeader.inc" %>
<%@include file="../include/navigationMenu.inc" %>
<div class="mian-content">
	<div class="mainArea">
		<div class="navigation-bar">
			<div class="mod_crumb"><a href="#"><strong>首页</strong></a><i>&gt;</i><a href="#" target="_blank" class="lk_0">模块选择</a><i>&gt;</i><span>Quantum</span></div>
		</div>
		<div id="modules-tabs" style="margin-bottom: 40px;">
		  <ul>
		    <s:iterator value="applications" status="status" >
				<li><a href="#tabs-${status.index+1}"  style="width:100%;"><s:property value="name"/></a></li>
			</s:iterator> 
		  </ul>
		  
		  <s:iterator value="applications" status="status" var="apps">
			  <div id="tabs-${status.index+1}" class="app-modules-list" >
			  	<div class="shop-section buy-quota" style="display: block;">
				    <div class="combo-content" style="height:700px;">
				        <div class="combo-title clearfix">
				            <span>
				                <em class="b">
				                    请选择你要购买的容量套餐:
				                </em>
				                (现有容量2063G)
				            </span>
				        </div>
				        <ul class="combo-content-list">
				        <s:iterator value="modules" var="module">
				            <li class="combo-content-list-item combo-group1">
				            	<input type="hidden" name="modulesId" value="<s:property value='#module.id'/>" />
				                <div class="combo-volume">
				                    <span class="pay-discount discount-hidden">
				                    </span>
				                    <span class="combo-many">
				                        可存1.5万张照片或7.5万个文档
				                    </span>
				                </div>
				                <div class="combo-type">
				                    <s:property value="name"/>
				                </div>
				                <div class="combo-pay-choice clearfix">
				                    <p class="clearfix no-discount">
				                            <span class="paym">
				                                <em class="moneym">
				                                    <s:property value="#module.modulePrice.price" />
				                                </em>
				                                &nbsp;<s:property value="#module.modulePrice.priceUnit.fullName" />/<s:property value="#module.modulePrice.pricePeriod.fullName" />&nbsp;
				                            </span>
				                        </label>
				                    </p>
				                    <p class="clearfix no-discount">
				                        <input id="pay-product4880050357179372399" _id="4880050357179372399" class="products"
				                        type="radio" name="pay" />
				                        <label hidefocus="true" for="pay-product4880050357179372399">
				                            <span>
				                                &nbsp;年付:
				                            </span>
				                            <span class="paym">
				                                <em class="moneym">
				                                    75
				                                </em>
				                                &nbsp;元/年&nbsp;
				                            </span>
				                            <span class="pay-save">
				                                省15元
				                            </span>
				                        </label>
				                    </p>
				                </div>
				                <div class="know-more">
				                	More >>
				                </div>
				            </li>
				            </s:iterator>
				        </ul>
				    </div>
				    <div class="subtotal clearfix" style="text-align: center">
				        <a class="btn" href="javascript:void;" onclick="buySubmit();" style="padding:16px 35px;">立即购买</a>
				    </div>
				</div>
			  </div>
		  </s:iterator>  
		  
		</div>
	</div>
</div>
<%--include file="/WEB-INF/jsp/include/pageFooter.inc" --%>
</body>
</html>